<template>
  <div class="product">
    <div class="tab">
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#e3e4e5"
        text-color="#abacac"
        active-text-color="#f30213"
        style="height: 25px"
        @select="handleSelect"
      >
        <el-menu-item index="1" style="margin-left: -5px"
          >京东首页</el-menu-item
        >
        <el-sub-menu index="6">
          <template #title>江苏</template>
          <el-menu-item index="6-1" style="color: black">上海</el-menu-item>
          <el-menu-item index="6-2" style="color: black">北京</el-menu-item>
          <el-menu-item index="6-3" style="color: black">深圳</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="5" style="margin-left: 150px"
          >我的订单</el-menu-item
        >
        <el-sub-menu index="2">
          <template #title>我的京东</template>
          <el-menu-item index="2-1" style="color: black"
            >待处理订单</el-menu-item
          >
          <el-menu-item index="2-2" style="color: black">我的问答</el-menu-item>
          <el-menu-item index="2-3" style="color: black"
            >返修退换货</el-menu-item
          >
        </el-sub-menu>
        <el-sub-menu index="7">
          <template #title>企业采购</template>
          <el-menu-item index="7-1" style="color: black">企业购</el-menu-item>
          <el-menu-item index="7-2" style="color: black">公共采购</el-menu-item>
          <el-menu-item index="7-3" style="color: black">工业品</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="8">
          <template #title>客户服务</template>
          <el-menu-item index="8-1" style="color: black">帮助中心</el-menu-item>
          <el-menu-item index="8-2" style="color: black">售后服务</el-menu-item>
          <el-menu-item index="8-3" style="color: black">在线客服</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="9">
          <template #title>网站导航</template>
          <el-menu-item index="9-1" style="color: black">item one</el-menu-item>
          <el-menu-item index="9-2" style="color: black">item two</el-menu-item>
          <el-menu-item index="9-3" style="color: black"
            >item three</el-menu-item
          >
        </el-sub-menu>
        <el-menu-item index="3">手机京东</el-menu-item>
        <el-menu-item index="4">网站无障碍</el-menu-item>
      </el-menu>
    </div>
    <div class="ban">
      <div class="imge"><img src="../../public/jingdong.png" alt="" /></div>
      <div class="searc">
        <div><input type="text" v-model="input" class="inputt" /></div>
        <div class="but"><button type="submit" class="bt-t">搜索</button></div>
      </div>
    </div>
    <div class="bota">
      <div class="bottom">
        <div class="title">全部商品</div>
        <div class="pen">
          <div class="p-d">配送至：</div>
          <div class="m-4">
            <el-cascader
              v-model="value"
              :options="options"
              @change="handleChange"
            />
          </div>
        </div>
      </div>
      <div class="cartlist">
        <el-table :data="cartList" style="width: 100%">
          <el-table-column prop="id" label="序号" width="150" />
          <el-table-column prop="name" label="商品" width="200" />
          <el-table-column prop="specification" label="规格" width="120" />
          <el-table-column prop="price" label="单价" width="120" />
          <el-table-column prop="num" label="数量" width="120" />
          <el-table-column prop="sum" label="小计" width="120" />
          <el-table-column label="操作" width="150">
            <template #default>
              <el-button
                link
                type="danger"
                plain
                size="small"
                @click="handleClick"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, reactive } from "vue";

const input = ref("");
const activeIndex2 = ref("1");
const value = ref([]);
const handleChange = (value) => {
  console.log(value);
};
const options = [
  {
    value: "guide",
    label: "山东",
    children: [
      {
        value: "disciplines",
        label: "泰安市",
        children: [
          {
            value: "consistency",
            label: "岱岳区",
          },
          {
            value: "feedback",
            label: "泰山区",
          },
          {
            value: "efficiency",
            label: "岱岳区",
          },
          {
            value: "controllability",
            label: "泰山区",
          },
        ],
      },
      {
        value: "navigation",
        label: "菏泽市",
        children: [
          {
            value: "side nav",
            label: "单县",
          },
          {
            value: "top nav",
            label: "曹县",
          },
        ],
      },
    ],
  },
  {
    value: "component",
    label: "上海",
    children: [
      {
        value: "basic",
        label: "徐汇区",
        children: [
          {
            value: "layout",
            label: "Layout",
          },
          {
            value: "color",
            label: "Color",
          },
          {
            value: "typography",
            label: "Typography",
          },
          {
            value: "icon",
            label: "Icon",
          },
          {
            value: "button",
            label: "Button",
          },
        ],
      },
      {
        value: "form",
        label: "长宁",
        children: [
          {
            value: "radio",
            label: "Radio",
          },
          {
            value: "checkbox",
            label: "Checkbox",
          },
          {
            value: "input",
            label: "Input",
          },
          {
            value: "input-number",
            label: "InputNumber",
          },
          {
            value: "select",
            label: "Select",
          },
          {
            value: "cascader",
            label: "Cascader",
          },
          {
            value: "switch",
            label: "Switch",
          },
          {
            value: "slider",
            label: "Slider",
          },
          {
            value: "time-picker",
            label: "TimePicker",
          },
          {
            value: "date-picker",
            label: "DatePicker",
          },
          {
            value: "datetime-picker",
            label: "DateTimePicker",
          },
          {
            value: "upload",
            label: "Upload",
          },
          {
            value: "rate",
            label: "Rate",
          },
          {
            value: "form",
            label: "Form",
          },
        ],
      },
      {
        value: "data",
        label: "静安区",
        children: [
          {
            value: "table",
            label: "Table",
          },
          {
            value: "tag",
            label: "Tag",
          },
          {
            value: "progress",
            label: "Progress",
          },
          {
            value: "tree",
            label: "Tree",
          },
          {
            value: "pagination",
            label: "Pagination",
          },
          {
            value: "badge",
            label: "Badge",
          },
        ],
      },
      {
        value: "notice",
        label: "虹口区",
        children: [
          {
            value: "alert",
            label: "Alert",
          },
          {
            value: "loading",
            label: "Loading",
          },
          {
            value: "message",
            label: "Message",
          },
          {
            value: "message-box",
            label: "MessageBox",
          },
          {
            value: "notification",
            label: "Notification",
          },
        ],
      },
      {
        value: "navigation",
        label: "宝山区",
        children: [
          {
            value: "menu",
            label: "Menu",
          },
          {
            value: "tabs",
            label: "Tabs",
          },
          {
            value: "breadcrumb",
            label: "Breadcrumb",
          },
          {
            value: "dropdown",
            label: "Dropdown",
          },
          {
            value: "steps",
            label: "Steps",
          },
        ],
      },
      {
        value: "others",
        label: "黄浦区",
        children: [
          {
            value: "dialog",
            label: "Dialog",
          },
          {
            value: "tooltip",
            label: "Tooltip",
          },
          {
            value: "popover",
            label: "Popover",
          },
          {
            value: "card",
            label: "Card",
          },
          {
            value: "carousel",
            label: "Carousel",
          },
          {
            value: "collapse",
            label: "Collapse",
          },
        ],
      },
    ],
  },
  {
    value: "resource",
    label: "山东",
    children: [
      {
        value: "disciplines",
        label: "泰安市",
        children: [
          {
            value: "consistency",
            label: "岱岳区",
          },
          {
            value: "feedback",
            label: "泰山区",
          },
          {
            value: "efficiency",
            label: "岱岳区",
          },
          {
            value: "controllability",
            label: "泰山区",
          },
        ],
      },
      {
        value: "navigation",
        label: "菏泽市",
        children: [
          {
            value: "side nav",
            label: "单县",
          },
          {
            value: "top nav",
            label: "曹县",
          },
        ],
      },
    ],
  },
];
const handleClick = () => {
  console.log('click')
}

const cartList = reactive([
  { id: 1, name: 'xxx', specification: ['big', "small"], price: 200, num: 1, sum: 200 }
])
</script>

<style lang="scss">
.product {
  width: 100%;
  margin: auto;
  .tab {
    height: 20px;
    .el-menu--horizontal {
      color: white;
      display: flex;
      justify-content: space-around;
      .el-menu-item {
        width: 100px;
      }
      .el-menu-item:hover {
        color: red;
      }
      .el-sub-menu__title:hover {
        color: red;
      }
      .el-sub-menu {
        width: 110px;
      }
    }
  }
  .ban {
    display: flex;
    justify-content: space-between;
    .searc {
      display: flex;
      justify-content: space-between;
      position: relative;
      top: 60px;
      right: 105px;
      .inputt {
        border: 2px solid red;
        width: 300px;
        height: 27px;
        outline: none;
        font-size: 20px;
      }
      .but {
        height: 33px;
        .bt-t {
          width: 50px;
          height: 100%;
          font-size: 15px;
          color: white;
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
          border: none;
          background-color: red;
          position: relative;
          right: 5px;
        }
      }
    }
  }
  .bota {
    width: 100%;
    .bottom {
      display: flex;
      justify-content: space-between;
      .title {
        position: relative;
        bottom: -10px;
        left: 100px;
        color: red;
        font-weight: bolder;
      }
      .pen {
        position: relative;
        right: 110px;
        display: flex;
        justify-content: space-between;
        .p-d {
          position: relative;
          top: 5px;
        }
      }
    }
    .cartlist {
      width: 82%;
      margin: auto;
      margin-top: 20px; 
    }
  }
}
</style>